import React, {useRef, useEffect, useState} from "react";
import {history } from 'umi';
import {cloneDeep} from "lodash";
import days from 'dayjs';
import {ActionType, PageContainer, ProTable} from '@ant-design/pro-components';
import { DatePicker } from 'antd';
import request from "@/utils/request";

const {RangePicker} = DatePicker;
const AccessPage: React.FC = (props: any) => {
    const {location: {state = {}} = {}} = history;
    const proTableFormRef: any = useRef();
    const actionRef = useRef<ActionType>();
    const [stationList, setList] = useState([])
    useEffect(() => {
        proTableFormRef.current.setFieldsValue({
            pileCode: state?.pileCode,
            gunNum: state?.gunCode ? state?.gunCode.startsWith('1') ? parseInt(state?.gunCode) : parseInt(state?.gunCode.slice(-1)) : undefined
        })
    }, []);
    useEffect(() => {
        request('/api1/baseFunction/stationPageList', {
            method: 'post',
            data: {
                pageNum: 1,
                pageSize: 9999
            }
        }).then((res) => {
            console.log('全部站', res);
            if (res && res.code === 200) {
                setList(res?.data?.records || [])
            }
        })
    }, []);
    const stationEnum: any = {};
    if (stationList && stationList.length) {
        for (const d of stationList) {
            stationEnum[d.id] = {text: d.stationName}
        }
    }
    console.log('stationEnum', stationEnum);
    const columns: any = [
        {
            title: '所属场站',
            dataIndex: 'stationId',
            key: 'stationId',
            // search: false,
            valueEnum: stationEnum,
            render: (_, record) => {
                return (<span>{record?.stationName || ''}</span>)
            }
        },
        {
            title: '桩编号',
            dataIndex: 'pileCode',
            key: 'pileCode',
            // search: false,
        },
        {
            title: '枪号',
            dataIndex: 'gunNum',
            key: 'gunNum',
            // search: false,
        },
        {
            title: '错误编号',
            dataIndex: 'errorCode',
            key: 'errorCode',
            search: false,
        },
        {
            title: '错误信息',
            dataIndex: 'errorInfo',
            key: 'errorInfo',
            search: false,
            // render: (text) => {
            //     return (
            //         <div>{text || '0.00'}</div>
            //     )
            // }
        },
        {
            title: '上报时间',
            dataIndex: 'createTime',
            key: 'createTime',
            // search: false,
            renderFormItem: () =>{
                // let list = [{"id": 0, "name": "Nginx大全"}, {"id": 1, "name": "Java从入门到精通"}]
                // // let list = Array.from(selectEnum);
                // const options = list.map(item => <option key={item.id}>{item.name}</option>);
                return (
                    <RangePicker placeholder={['起始时间', '截止时间']} showTime />
                )
            }
        },
    ]
    return (
        <PageContainer
            ghost
            header={{
                title: '',
            }}
        >
            <ProTable<API.UserInfo>
                headerTitle="订单列表"
                actionRef={actionRef}
                rowKey="id"
                pagination={{defaultPageSize: 10}}
                search={{
                    labelWidth: 120
                }}
                formRef={proTableFormRef}
                // params={{
                //     ...tableParams,
                //     current: tableParams.pageNum,
                //     pileCode: state?.pileCode,
                // }}
                request={async (params, sorter, filter) => {
                    // const { data, success } = await queryUserList({
                    //   ...params,
                    //   // FIXME: remove @ts-ignore
                    //   // @ts-ignore
                    //   sorter,
                    //   filter,
                    // });
                    // return {
                    //   data: data?.list || [],
                    //   success,
                    // };
                    const tableParams = {...params, ...proTableFormRef.current.getFieldsValue()  };
                    const cloneParams = cloneDeep(tableParams);
                    delete cloneParams.current;
                    delete cloneParams.createTime;
                    if (tableParams.createTime && tableParams.createTime.length) {
                        cloneParams.startTime = days(tableParams.createTime[0]).format('YYYY-MM-DD HH:mm:ss');
                        cloneParams.endTime = days(tableParams.createTime[1]).format('YYYY-MM-DD HH:mm:ss');
                    }
                    const {data, code} = await request('/api1/baseFunction/errorPageList', {
                        method: 'post',
                        data: {
                            ...cloneParams,
                            gunNum: parseInt(cloneParams?.gunNum),
                            pageNum: params.current
                        }
                    });
                    console.log('data', data);
                    if (code && code === 200) {
                        return {
                            data: data?.records || [],
                            success: true,
                            total: data?.total
                        };
                    }
                }}
                columns={columns}
                onChange={(pagination) => {
                    console.log('分页内容', pagination);
                    console.log('roTableFormRef.current.pileCode', proTableFormRef.current.getFieldValue('pileCode'));
                    console.log('roTableFormRef.current.orderNum', proTableFormRef.current.getFieldValue('orderNum'));
                    setParams({
                        pageSize: pagination?.pageSize,
                        pageNum: pagination?.current,
                        pileCode: proTableFormRef.current.getFieldValue('pileCode'),
                        orderNum: proTableFormRef.current.getFieldValue('orderNum'),
                    })
                }}
            />
        </PageContainer>
    );
};

export default AccessPage;
